<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>会议室管理系统</title>
    <!-- Icons -->
    <link rel="shortcut icon" href="assets/media/favicons/favicon.png">
    <link rel="icon" type="image/png" sizes="192x192" href="assets/media/favicons/favicon-192x192.png">
    <link rel="apple-touch-icon" sizes="180x180" href="assets/media/favicons/apple-touch-icon-180x180.png">
    <!-- END Icons -->
    <link rel="stylesheet" id="css-main" href="assets/css/oneui.min.css">
    <style>
        #DataTables_Table_3_wrapper{
            position: relative;
        }
        .ly-row{
            position: absolute;
            top: 8px;
            z-index: 10;
        }
        .dt-buttons{
            text-align: right;
        }
    </style>
</head>

<body>
    <div id="page-container" class="sidebar-o sidebar-dark side-scroll page-header-fixed">
        <div class="sidebar"></div>
        <!-- Header -->
        <div class="header"></div>
        <!-- END Header -->

        <!-- Main Container -->
        <main id="main-container">

            <!-- Default Table -->
            <div class="block">
                <div class="block-content block-content-full">
                    <div id="DataTables_Table_3_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer">
                        <div class="ly-row">
                            <button type="button" class="btn btn-sm btn-primary" id="add-user">添加用户</button>
                        </div>
                        <div class="row">
                            <div class="col-sm-12">
                                <table
                                    class="table table-bordered table-striped table-vcenter js-dataTable-buttons dataTable no-footer"
                                    id="DataTables_Table_3" role="grid" aria-describedby="DataTables_Table_3_info">
                                    <thead>
                                        <tr role="row">
                                            <th class="text-center sorting_asc" style="width: 50px;" tabindex="0"
                                                aria-controls="DataTables_Table_3" rowspan="1" colspan="1"
                                                aria-sort="ascending"
                                                aria-label="ID: activate to sort column descending">序号</th>
                                            <th class="sorting" style="width: 15%;" tabindex="0"
                                                aria-controls="DataTables_Table_3" rowspan="1" colspan="1"
                                                aria-label="Name: activate to sort column ascending">用户名</th>
                                            <th class="d-none d-sm-table-cell sorting" style="width: 20%;" tabindex="0"
                                                aria-controls="DataTables_Table_3" rowspan="1" colspan="1"
                                                aria-label="Email: activate to sort column ascending">手机号</th>
                                            <th class="d-none d-sm-table-cell sorting" style="width: 20%;" tabindex="0"
                                                aria-controls="DataTables_Table_3" rowspan="1" colspan="1"
                                                aria-label="Email: activate to sort column ascending">密码</th>
                                            <th class="d-none d-sm-table-cell sorting" style="width: 15%;" tabindex="0"
                                                aria-controls="DataTables_Table_3" rowspan="1" colspan="1"
                                                aria-label="Access: activate to sort column ascending">部门</th>
                                            <th class="d-none d-sm-table-cell sorting" style="width: 10%;" tabindex="0"
                                                aria-controls="DataTables_Table_3" rowspan="1" colspan="1"
                                                aria-label="Access: activate to sort column ascending">职位</th>
                                            <th style="width: 10%;" class="sorting" tabindex="0"
                                                aria-controls="DataTables_Table_3" rowspan="1" colspan="1"
                                                aria-label="Registered: activate to sort column ascending">操作
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <!-- 此处为动态生成表格 -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END Default Table -->

        </main>
        <!-- END Main Container -->

        <!-- Footer -->
        <div class="footer"></div>
    </div>

    <div class="modal" id="modal-block-normal" tabindex="-1" role="dialog" aria-labelledby="modal-block-normal"
        aria-modal="true" style="display: none; padding-left: 0px;">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="block block-themed block-transparent mb-0">
                    <div class="block-header bg-primary-dark">
                        <h3 class="block-title">请输入员工信息</h3>
                        <div class="block-options">
                            <button type="button" class="btn-block-option" data-dismiss="modal" aria-label="Close">
                                <i class="fa fa-fw fa-times"></i>
                            </button>
                        </div>
                    </div>
                    <div class="block-content font-size-sm">
                        <form enctype="multipart/form-data" class="add-form">
                            <div class="row push">
                                <div class="col-lg-2">
                                </div>
                                <div class="col-lg-10 col-xl-7">
                                    <div class="form-group">
                                        <input type="text" class="form-control" id="uName" name="uName" placeholder="姓名">
                                    </div>
                                    <div class="form-group">
                                        <input type="text" class="form-control" id="tel" name="tel" placeholder="手机号">
                                    </div>
                                    <div class="form-group">
                                        <select class="form-control" id="tId" name="tId">
                                            <option value="0">请选择部门</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <select class="form-control" id="power" name="power">
                                            <option value="2">员工</option>
                                            <option value="1">经理</option>
                                            <option value="0">超管</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="block-content block-content-full text-right border-top">
                        <button type="button" class="btn btn-sm btn-light" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-sm btn-primary" data-dismiss="modal" id="add-submit">
                            <i class="fa fa-check mr-1"></i>Ok
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="assets/js/oneui.core.min.js"></script>
    <script src="assets/js/oneui.app.min.js"></script>

    <script src="assets/js/public.js"></script>

    <script>
        ;(async ()=>{
            // 获取全部员工信息，并渲染表格
            const userRes = await $.get("http://localhost:3000/user");
            let str = "";
            for (let i = 0; i < userRes.data.length; i++) {
                let userData = userRes.data[i];
                let team = await $.get("http://localhost:3000/team", { tId: userData.tId });

                str += `<tr role="row" class="odd">
                        <td class="text-center font-size-sm sorting_1">${i + 1}</td>
                        <td class="font-w600 font-size-sm">
                            <span class="text-muted">${userData.uName}</span>
                        </td>
                        <td class="d-none d-sm-table-cell font-size-sm">
                            <span class="text-muted">${userData.tel}</span>
                        </td>
                        <td class="d-none d-sm-table-cell font-size-sm">
                            <button type="button" class="btn btn-sm btn-warning reset-pw" data-id="${userData.uId}" id="add-user">重置密码</button>
                        </td>
                        <td class="d-none d-sm-table-cell">
                            <span class="text-muted">${team.data[0].tName}</span>
                        </td>
                        <td>
                            <span class="badge badge-success font-size-sm">${userData.power === 0 ? "超管" : (userData.power === 1 ? "经理" : "员工")}</span>
                        </td>
                        <td class="text-center">
                            <div class="btn-group">
                                <button type="button" class="btn btn-sm btn-light js-tooltip-enabled set-user" data-toggle="tooltip" data-id="${userData.uId}" data-original-title="Edit Client">
                                    <i class="fa fa-fw fa-pencil-alt"></i>
                                </button>
                                <button type="button" class="btn btn-sm btn-light js-tooltip-enabled del-user" data-toggle="tooltip" data-id="${userData.uId}" data-original-title="Remove Client">
                                    <i class="fa fa-fw fa-times"></i>
                                </button>
                            </div>
                        </td>
                    </tr>`
            }
            $("tbody").html(str)

            // 添加员工表单中部门列表信息
            const teamRes = await $.get("http://localhost:3000/team");
            const teamData = teamRes.data;
            let teamStr = "<option value=''>请选择部门</option>";
            teamData.forEach(val => {
                teamStr += `<option value="${val.tId}">${val.tName}</option>`;
            });
            $("#tId").html(teamStr);

            // 员工表单功能状态：0添加，1修改
            let formState = 0;

            // 打开添加员工表单
            $("#add-user").click(function(){
                $('#modal-block-normal').modal('show');
                if(formState === 1){
                    $("#uName").val("");
                    $("#tel").val("");
                    $("#tId").val("");
                    $("#power").val("2");
                }
                $("#tel").removeAttr("readonly");
                formState = 0;
            })

            let uId;

            // 打开修改员工表单
            $(".set-user").click(async function(){
                $('#modal-block-normal').modal('show');
                uId = $(this)[0].dataset.id;
                // 预填充表单
                const userRes = await $.get("http://localhost:3000/user", {uId});
                $("#uName").val(userRes.data[0].uName);
                $("#tel").val(userRes.data[0].tel);
                $("#tId").val(userRes.data[0].tId);
                $("#power").val(userRes.data[0].power);
                $("#tel").attr("readonly", "readonly");

                formState = 1;
            })
            
            // 提交员工信息
            $("#add-submit").click(async function(){
                // 获取表单数据
                const formData = $.parse($(".add-form").serialize());
                if(formState === 0){
                    // 新增
                    const addRes = await $.post("http://localhost:3000/user/add", formData );
                    alert(addRes.msg);
                    if(addRes.code === 1){
                        location.reload();
                    }
                }else{
                    // 修改
                    formData.uId = uId;
                    const setRes = await $.post("http://localhost:3000/user/set", formData );
                    alert(setRes.msg);
                    if(setRes.code === 1){
                        location.reload();
                    }
                }
            })

            // 删除员工信息
            $(".del-user").click(async function(){
                uId = $(this)[0].dataset.id;
                const setRes = await $.post("http://localhost:3000/user/del", {uId} );
                alert(setRes.msg);
                if(setRes.code === 1){
                    location.reload();
                }
            })

            // 重置密码
            $(".reset-pw").click(async function(){
                uId = $(this)[0].dataset.id;
                const setRes = await $.post("http://localhost:3000/user/resetpassword", {uId} );
                alert(setRes.msg);
                if(setRes.code === 1){
                    location.reload();
                }
            })

            // 加载表格功能插件
            const tablePlugins = "assets/js/plugins/datatables";
            $("<script>").attr("src", tablePlugins + "/jquery.dataTables.min.js").appendTo($("body"));
            $("<script>").attr("src", tablePlugins + "/dataTables.bootstrap4.min.js").appendTo($("body"));
            $("<script>").attr("src", tablePlugins + "/buttons/dataTables.buttons.min.js").appendTo($("body"));
            $("<script>").attr("src", tablePlugins + "/buttons/buttons.print.min.js").appendTo($("body"));
            $("<script>").attr("src", tablePlugins + "/buttons/buttons.html5.min.js").appendTo($("body"));
            $("<script>").attr("src", "assets/js/pages/be_tables_datatables.min.js").appendTo($("body"));
        })();
    </script>
</body>
</html>
